<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-Vue的常用指令v-for</title>
</head>
<body>
<div id="app">
    <p v-for="(score, index) in scores">
        {{index + ':' + score}}
    </p>
    <hr>
    <p v-for="d in dog">
        {{d}}
    </p>
    <hr>
    <p v-for="str in name">
        {{str}}
    </p>
    <hr>
    <p v-for="n in phone">
        {{n}}
    </p>
</div>
<div id="app1">
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="p in persons">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            scores: [100, 87, 88, 80],
            dog: {name: '旺财', age: 6, height: 1.2},
            name: 'er',
            phone: '123',
        }
    });
    let vm1 = new Vue({
        el: '#app1',
        data: {
            persons: [
                {name: '张三', age: 18, sex: '男'},
                {name: '李四', age: 20, sex: '男'},
                {name: '王五', age: 23, sex: '女'},
                {name: '赵6', age: 30, sex: '男'}
            ]
        }
    });
</script>
</body>
</html>